// import React, { useRef, useEffect } from 'react';
//
// const Map_lz = () => {
//     const mapContainerRef = useRef(null);
//     let map = null;
//
//     useEffect(() => {
//         const initMap = () => {
//             let container = mapContainerRef.current;
//             // Initialize map
//             map = new AMap.Map(container, {
//                 mapStyle: 'amap://styles/519bc5be170415504fe23ba1a632d085',
//                 zoom: 22,
//                 center: [103.834228, 36.060798],
//                 viewMode: '3D'
//             });
//
//             // Administrative district boundaries
//             let polygons = [];
//             var opts = {
//                 subdistrict: 0,
//                 extensions: 'all',
//                 level: 'district'
//             };
//             let district = new AMap.DistrictSearch(opts);
//             district.setExtensions('all');
//             district.search('晋中市', function (status, result) {
//                 map.remove(polygons);
//                 polygons = [];
//                 var bounds = result.districtList[0].boundaries;
//                 if (bounds) {
//                     for (var i = 0, l = bounds.length; i < l; i++) {
//                         var polygon = new AMap.Polygon({
//                             strokeWeight: 5,
//                             path: bounds[i],
//                             fillOpacity: 0.4,
//                             fillColor: '#80d8ff',
//                             strokeColor: '#0091ea'
//                         });
//                         polygons.push(polygon);
//                     }
//                 }
//                 map.add(polygons);
//                 map.setFitView(polygons);
//             });
//
//             // Fetch engineer device data
//             let url = "/dashboard/findEngineerDeviceTree";
//             fetch(url)
//                 .then(response => response.json())
//                 .then(data => {
//                     let eds = data;
//                     let devices = [];
//                     eds.forEach(item => {
//                         devices.push(...item.children);
//                     });
//
//                     if (devices.length > 0) {
//                         let defaultDevice = devices[0];
//                         let ed = {
//                             engineer_id: defaultDevice.engineer_id,
//                             device_id: defaultDevice.id
//                         };
//                         // SET_ED function needs to be defined for setting state
//                         // Replace with appropriate state management (e.g., useState)
//                         SET_ED(ed);
//                     }
//
//                     devices.forEach(d => {
//                         let marker = new AMap.Marker({
//                             position: d.position,
//                             title: d.name,
//                             extData: d
//                         });
//
//                         marker.on('click', function () {
//                             let device_id = this.getExtData().id;
//                             let engineer_id = this.getExtData().engineer_id;
//                             let ed = {
//                                 device_id,
//                                 engineer_id
//                             };
//                             SET_ED(ed); // Replace with appropriate state management (e.g., useState)
//                         });
//
//                         map.add(marker);
//                     });
//                 })
//                 .catch(error => {
//                     console.error('Error fetching engineer device data:', error);
//                 });
//         };
//
//         initMap();
//
//         // Clean up map resources on component unmount
//         return () => {
//             if (map) {
//                 // Clean up map instance if needed
//                 // map.destroy();
//             }
//         };
//     }, []); // Empty dependency array ensures this effect runs only once on mount
//
//     return <div ref={mapContainerRef} style={{ height: '100%' }}></div>;
// };
//
// export default Map_lz;
